<template>
	<view style="background-color: #fff;">
		<uni-nav-bar  left-icon="left"  :statusBar="true" titleSize="30px" leftText="返回" rightText="保存"  title="新增机器入库"  @clickLeft="back" @clickRight="addBtn" :fixed="true" backgroundColor="#3286ed" color="#fff"/>
	  
		<view >
			 <u--form class="form" labelPosition="left" labelWidth="100px" :model="form" :rules="rules" ref="form">
				 <u-form-item label="入库编号" prop="warehousingNo" borderBottom ref="item1">
				 	<u--input v-model="form.warehousingNo" border="none"  :readonly="true"></u--input>
				 	<u-icon slot="right" class="box" name="arrow-right"></u-icon>
				 </u-form-item>
				 <u-form-item label="入库时间" @click="show=true" prop="warehousingTime" borderBottom ref="item1">
						<u--input v-model="form.warehousingTime"  border="none":readonly="true"></u--input>
						<u-icon slot="right" class="box" name="arrow-right"></u-icon>
				 </u-form-item>
				 <u-form-item label="业务类型" @click="businessTypeShow=true" prop="businessType" borderBottom ref="item1">
				 	<u--input v-model="businessType"  border="none" :readonly="true"></u--input>
					<u-picker :show="businessTypeShow" :columns="BusinessTypeOption" @confirm="businessTypeConfirm" @cancel="businessTypeShow=false" keyName="dictLabel"></u-picker>
				 	<u-icon slot="right"  class="box" name="arrow-right"></u-icon>
				 </u-form-item>
				 <u-form-item label="入库类型" @click="receiptTypeShow=true" prop="receiptType" borderBottom ref="item1">
				 	<u--input v-model="receiptType"  border="none"  :readonly="true"></u--input>
					<u-picker :show="receiptTypeShow" :columns="receiptTypeOption" @confirm="receiptTypeConfirm" @cancel="receiptTypeShow=false" keyName="dictLabel"></u-picker>
				 	<u-icon slot="right"  class="box" name="arrow-right"></u-icon>
				 </u-form-item>
				 <u-form-item label="入库仓库" @click="selectWarehouse(1)" prop="warehousingWarehouseName" borderBottom ref="item1">
				 	<u--input v-model="form.warehousingWarehouseName"  border="none" :readonly="true"></u--input>
					<u-picker :show="warehouseShow" :columns="warehouseOption" @confirm="warehouseConfirm" @cancel="warehouseShow=false" keyName="warehouseName"></u-picker>
				 	<u-icon slot="right"  class="box" name="arrow-right"></u-icon>
				 </u-form-item>
				 <u-form-item label="关联产品"  >
				 	<u-icon slot="right"  @click="selectProduct" class="box" name="arrow-right"></u-icon>
				 </u-form-item>
				 
				 
			
				
				
				 <scroll-view v-if="this.form.productList.length>0" scroll-x='true' scroll-left="120"  scroll-with-animation="true">
						<view class="scroll-view-item">
								<view class="scroll-view-item_H">整机品名</view>
								 <view class="scroll-view-item_HH">型号</view>
								 <view class="scroll-view-item_HH">选择仓库</view>
								 <view class="scroll-view-item_HH">入库数量</view>
								 <view class="scroll-view-item_H">库存数量</view>
								 <view class="scroll-view-item_H">单位</view>
								 <view class="scroll-view-item_H">操作</view> 
						</view>
						
						 <view class="scroll-view-item" v-for="(item,index) in form.productList"  :key="index">
							 <view class="scroll-view-item_H">{{item.productName}}</view>
							 <view class="scroll-view-item_HH">{{item.model}}</view>
							 <view class="scroll-view-item_HH">
								<view style="display: flex;">
									<u--input :readonly="true" v-model="item.warehousingWarehouseName"> </u--input>
									<view style="padding: 0 5px;" @click="selectWarehouse(2,index)">选择</view>
								</view>
							 </view>
							 <view class="scroll-view-item_HH">
								 <u--input v-model="item.receiptQuantity"></u--input>
							 </view>
							 <view class="scroll-view-item_H">{{item.sumQuantity}}</view>
							 <view class="scroll-view-item_H">台</view>
							 <view class="scroll-view-item_H" @click="delFn(index)">删除</view>
						 </view>
				 </scroll-view>
				 
			
				 <u-form-item label="负责人" @click="chargePersonNameBtn" prop="chargePersonName" borderBottom ref="item1">
				 	<u--input  border="none" :readonly="true" v-model="form.chargePersonName"></u--input>
				 	<u-icon slot="right"  class="box" name="arrow-right"></u-icon>
				 </u-form-item>
				 <u-form-item label="备注"   borderBottom ref="item1">
					 <u--textarea v-model="form.chargePersonName" placeholder="请输入备注" ></u--textarea>
				<!-- 	<u--input  border="none" :readonly="true" v-model="form.chargePersonName"></u--input>
				 	<u-icon slot="right"  class="box" name="arrow-right"></u-icon> -->
				 </u-form-item>
				<!-- <u--input type="text" style="height: 50px;"></u--input> -->
				
				 
			 </u--form>
				<u-toast ref="uToast"></u-toast>
				<!-- 入库时间 -->
				<u-datetime-picker :closeOnClickOverlay="true" @close="show=false" v-model="warehousingTime" :show="show" @confirm="warehousetimConfirm" @cancel="show=false"   mode="date"></u-datetime-picker>
		</view>
	</view>
</template>

<script>
	import {listWarehouse} from '@/api/warehouse.js'
	import {getDicts} from '@/api/dictionary/index.js'
	import{addOrder} from '@/api/receiptorder.js'
	export default {
		data(){
			return{
				form:{
					id: '',
					warehousingNo: '',//入库编号
					warehousingTime: '',//入库时间
					businessType: '',//业务类型
					receiptType: '',//入库类型
					warehousingWarehouseId: '',//入库仓库
					warehousingWarehouseName: '',//入库仓库名称
					chargePersonId: '',//责任人id
					chargePersonName: '',//责任人名称
					remark: '',//备注
					orderStatus: "0",//订单状态
					delFlag: '',//删除标志
					productList:[],//关联的产品
				},
				rulesShow:false,
				warehousingTime:'',//时间选择器回显当前时间
				rules:{
					warehousingTime: [	{	required: true,	message: '请输入入库时间',	trigger: ['blur', 'change']}],
					businessType: [	{	required: true,	message: '请输入业务类型',	trigger: ['blur', 'change']}],
					receiptType: [	{	required: true,	message: '请输入入库类型',	trigger: ['blur', 'change']}],
					warehousingWarehouseName: [	{	required: true,	message: '请输入入库仓库',	trigger: ['blur', 'change']}],
					chargePersonName: [	{	required: true,	message: '请输入负责人',	trigger: ['blur', 'change']}],
				},
				show:false,
				businessTypeShow:false,
				receiptTypeShow:false,
				warehouseShow:false,
				businessType:'',//回显业务类型
				receiptType:'',//回显入库类型
				receiptTypeOption:[],//入库类型
				BusinessTypeOption:[],//业务类型
				warehouseOption:[],//入库仓库
				type:'',//用来区分入库
				index:'',//用来确认产品的顺序
				
			}
		},
		onLoad(){
			this.form.warehousingNo=this.setOrderNo()
			this.warehousingTime=new Date().getTime()
			this.getReceiptType()
			this.getBusinessType()
			this.getWarehouse()
		},
		onBackPress(){
			this.getValue()
		},
		onShow(){
			var that=this
			uni.$on('updateData',function(data){
				console.log(data);
				that.form.chargePersonId=data.userId
				that.form.chargePersonName=data.userName
			})
		},
		methods:{
			getValue(list){
				console.log(list,'B页面返回的值！');
				this.form.productList=list
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			back(){},
			async addBtn(){
			 await 	this.$refs.form.validate()
			
				const res=await addOrder(this.form)
				if(res.code==200){
					this.$refs.uToast.show({
						type:"success",
						message:'添加成功！',
						complete(){
							uni.redirectTo({
								url:"/pages/receiptorder/index"
							})
						}
					})
				}			
				
			},
			getWarehouse(){
				listWarehouse({pageNum:1,pageSize:100000}).then(response=>{
					console.log(response);
					this.warehouseOption.push(response.rows)
				})
			},
			// 获取业务类型 biz_business_type
            getBusinessType(){
				getDicts('biz_business_type').then(response=>{
					this.BusinessTypeOption.push(response.data)
				})
			},
			// 获取入库类型
			getReceiptType(){
				getDicts('biz_receipt_type').then(response=>{
					console.log(response);
					this.receiptTypeOption.push(response.data)
				})
			},
			// 自动获取编号
			setOrderNo(){
			  var date = new Date();
			  var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
			  var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
			  var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
			  //修改月份格式
			  if (month >= 1 && month <= 9) {
				month = "0" + month;
			  }
			  //修改日期格式
			  if (day >= 0 && day <= 9) {
				day = "0" + day;
			  }
					
			  let round = Math.floor(Math.random() * (999 - 100)) + 100;
			  var currentFormatDate = `${year}${month}${day}`;
			  return "QTRK"+currentFormatDate+round;
			},
			// 选择入库时间
			warehousetimConfirm(e){
				console.log(e);
				this.form.warehousingTime=this.getTime(e.value)
				this.show=false
			},
			// 选择业务类型
			businessTypeConfirm(e){
				console.log(e);
				this.businessType=e.value[0].dictLabel
				this.form.businessType=e.value[0].dictValue
				this.businessTypeShow=false
			},
			// 选择入库类型
			receiptTypeConfirm(e){
				this.receiptType=e.value[0].dictLabel
				this.form.receiptType=e.value[0].dictValue
				this.receiptTypeShow=false
			},
			// 选择仓库
			selectWarehouse(e,index){
				console.log(e,index);
				this.type=e
				this.index=index
				this.warehouseShow=true
			},
			// 选择仓库
			warehouseConfirm(e){
				console.log(e);
				if(this.type==1){
					this.form.warehousingWarehouseId=e.value[0].id
					this.form.warehousingWarehouseName=e.value[0].warehouseName
				}
				if(this.type==2){
					this.form.productList[this.index].warehousingWarehouseId=e.value[0].id
					this.form.productList[this.index].warehousingWarehouseName=e.value[0].warehouseName
				}
				
				this.type=''
			    this.warehouseShow=false
			},
			//时间格式化
			getTime(val){
				var date = new Date(val);
				var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
				var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
				var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
				//修改月份格式
				if (month >= 1 && month <= 9) {
				  month = "0" + month;
				}
				//修改日期格式
				if (day >= 0 && day <= 9) {
				  day = "0" + day;
				}
				var currentFormatDate = `${year}-${month}-${day}`;
				return currentFormatDate
			},
			// 关联产品
			selectProduct(){
				uni.navigateTo({
					url:'/pages/dialog/product'
				})
			},
			// 选择负责人
			chargePersonNameBtn(){
				uni.navigateTo({
					url:'/pages/dialog/user'
				})
			},
			// 关联产品删除
			delFn(index){
				this.form.productList.splice(index,1)
			},
			
		}
	}
</script>

<style lang="scss">
	.form{
		padding: 0 10px 0 15px;
	}
	.box{
		width: 40px;
		padding-left: 20px;
		height: 22px;
	}
	.scroll-view-item {
	  min-width: 600px;
	  height: 40px;
	  line-height: 40px;
	  padding-left: 10px;
	  display: flex;
	  // background-color: red;
	}
	.scroll-view-item_H {
		text-align: center;
		width: 100px;
		
	}
	.scroll-view-item_HH{
		text-align: center;
		padding: 0 5px;
		width: 200px;
	}
</style>